<style>
.clinics {
	display: table;
	position: relative;
	width: 100%;
	margin: 0px 0px 5px 0px;
	background-color: #E1EEF4;
}

.clinicsName {
	background-color: #2191C0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 4px 10px;
    width: 300px;
    text-align: right;
    float: left;
}

.clinicsSelect {
	float: left;
	width: 250px;
}

.clinicsDescription {
    color: #00557F;
    text-align: center;
    width: 100%;
    display: table;
    vertical-align: middle;
}

.editButtonDiv {
	display: table;
    height: 25px;
    position: relative;
    width: 100%;
}

.answerValue input {
	margin: 0px;
}

.complaintName {
    margin-top: 2px;
	float: left;
    color: #00557F;
    padding: 2px 0px 2px 4px;
    width: 48%;
}

.clinics-checkbox {
	float: left;
	margin-top: 6px;
}

.clinicalManifestationName {
	float: left;
	width: 320px;
}

.clinicDescriptionArea {
	display: table;
	margin: 5px 5px 5px 350px;
	line-height: 25px;
}
</style>

<script>
	$(document).ready(function() {
		$(".clinicsSelect").each(function() {
			setClinicsDisabled(this);
		});
	});

	$(".clinics-checkbox").click(function(){
		if($(this).is(":checked")){
			setClinicsEnabled($(this).parent().find(".clinicsSelect"));
		} else{
			setClinicsDisabled($(this).parent().find(".clinicsSelect"));
		}
	});

	var setClinicsEnabled = function (element) {
		$(element).removeAttr('disabled');
	}

	var setClinicsDisabled = function (element) {
		$(element).attr('disabled', 'disabled');
	}
	
	$("#editClinicButton").click(function(){
		$("#editClinicButton").attr("disabled", true);	
	});
	var saveClinicalManifestations = function () {
		var id = null;
		var isChecked = null;
		var jsonObject = "";
		var surveyId = $("#hidden-survey-id").val();
		var medicineCardId = $("#hidden-med-card-id").val();
		var syndromeId = $("input[name='synd_radio']:checked").attr('value');

		jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";
		jsonObject = jsonObject + "'medicineCardId':" + medicineCardId + ",";
		jsonObject = jsonObject + "'syndromeId':" + syndromeId + ",";
		jsonObject = jsonObject + "'clinicalManifestationNorms':[";
		
		$(".clinics-checkbox").each(function() {
			isChecked = $(this).is(":checked");
			id = $(this).parent().find(".clinicsSelect option:selected").val();
			jsonObject = jsonObject + "{'id':" + id;
			jsonObject = jsonObject + ",'isChecked': " + isChecked + "},";
		});
		jsonObject = jsonObject.substring(0, jsonObject.length - 1);
		jsonObject = jsonObject + "]}";
		console.log(jsonObject);

		$.ajax({
			type : "POST",
			url : "/surveyView/saveClinicalManifestations",
			data : jsonObject,
			dataType : "json",
			contentType : "application/json",
			success : function(data) {
				$("#hidden-survey-id").val(data);
				noty({
					text: "&{'clinic.save.success'}",
					layout: "topRight",
					type: "success"
				});
			},
			error : function(e) {
				noty({
					text: "&{'clinic.save.error'}",
					layout: "topRight",
					type: "error"
				});
			}
		});
	}
</script>

%{	
clinicalManifestationComplaintBySyndrome = syndrome != null ? models.ClinicalManifestationComplaint.find("bySyndrome", syndrome).fetch() : null;
}%

<div id="clinics-info">
	#{if clinicalManifestationComplaintBySyndrome != null && !clinicalManifestationComplaintBySyndrome.isEmpty()}
		#{list clinicalManifestationComplaintBySyndrome, as:'clinicalManifestationComplaint'}
			<div class="clinics">
				<div class="clinicsName">${clinicalManifestationComplaint.clinicalManifestationComplainName}</div>
				<div class="clinicDescriptionArea">
					#{list clinicalManifestationComplaint.clinicalManifestations, as:'clinicalManifestation'}
						<div class="clinicsDescription">
							<input class="clinics-checkbox" type="checkbox">
							<div class="clinicalManifestationName">${clinicalManifestation.name}</div>
							#{if clinicalManifestation.clinicalManifestationType.name() == 'DROPDOWN'}
					   			#{select 'clinicalManifestationNorms', class:"clinicsSelect"}
									#{list items:models.ClinicalManifestationNorm.find("byClinicalManifestation", clinicalManifestation).fetch(), as:'clinicalManifestationNorm'}
										#{option clinicalManifestationNorm.id}
											${clinicalManifestationNorm.description}
										#{/option}
					    			#{/list}
								#{/select}
							#{/if}	
						</div>
					#{/list}
				</div>
			</div>
		#{/list}
		<div class="editButtonDiv">
			<input type="submit" class="editButton" onclick="saveClinicalManifestations()" id="editClinicButton" value="&{'save'}">
		</div>
	#{/if}
</div>